<!-- 个人中心 -->
<template>
	<view class="contain">
		<view class="top">
			<view class="je">
				<view class="yuan">可提现金额（元）</view>
				<view class="qian">{{total_money?total_money:'0.00'}}</view>
			</view>
			<view class="txjl" @click="goPage('/pages/distribution/withdrawalRecord', true)">
				提现记录
			</view>
		</view>
		<view class="xia">
			<view class="xia1">
				<view class="item_1">提现金额</view>
				<view class="item_3">
					<view class="box">
						<u-field placeholder="请输入提现金额" v-model="money" label-width='50' label="￥" class="username"></u-field>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="item_4">提现至</view>
					<view class="ti" style="display: flex;" @click="toggle('bottom')">
						<view class="item_5"  v-if="active==0">请选择提现方式</view>
						<view class="item_5"  v-if="active==1">银行卡</view>
						<view class="item_5"  v-if="active==2">微信</view>
						<view class="item_5"  v-if="active==3">支付宝</view>
						<view class="jiantou"> </view>
					</view>
				</view>
				<view class="btn" @click="withdrawalAdd()">确认提现</view>
			</view>
			<view class="xia2">
				<view class="item_1">提现说明</view>
				<view class="item_2">这是一段提现说明。这是一段提现说明。这是一段 提现说明。这是一段提现说明。</view>
			</view>
		</view>
		<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" >
			<view class="popBox" style="background-color: #fff;height: 562rpx;border-radius: 28rpx 28rpx 0px 0px;position: relative;">
				<view style="padding: 44rpx 78rpx 0rpx 50rpx;display: flex;flex-direction: column;justify-content: space-between;height: 75%;">
					<view class="way">选择提现方式</view>
					<view style="display: flex;height: 72rpx;border-bottom: 1px solid #F2F2F2;" @click="change(1)">
						<image v-if="active==1" style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao42.png"></image>
						<image v-else style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao44.png"></image>
						<image style="width: 46rpx;height: 46rpx;margin-left: 36rpx;" src="../../static/image/fenxiao43.png"></image>
						<view class="poptitle">银行卡转账</view>
					</view>
					<!-- <view style="display: flex;height: 72rpx;border-bottom: 1px solid #F2F2F2;" @click="change(2)">
						<image v-if="active==2" style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao42.png"></image>
						<image v-else style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao44.png"></image>
						<image style="width: 46rpx;height: 46rpx;margin-left: 36rpx;" src="../../static/image/fenxiao45.png"></image>
						<view class="poptitle">微信零钱</view>
					</view>
					<view style="display: flex;height: 72rpadding: ;x;border-bottom: 1px solid #F2F2F2;" @click="change(3)">
						<image v-if="active==3" style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao42.png"></image>
						<image v-else style="width: 39rpx;height: 38rpx;" src="../../static/image/fenxiao46.png"></image>
						<image style="width: 46rpx;height: 46rpx;margin-left: 36rpx;" src="../../static/image/fenxiao47.png"></image>
						<view class="poptitle">支付宝账户</view>
					</view> -->

				</view>

				<view class="queding" @click="submit()">确定 </view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'top',
				money: '',
				total_money:"0.00",
				active:1
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				let that = this
				that.$api.withdrawal({}).then(res => {
					console.log('withdrawal', res)
					if (res.code == 1) {
						this.total_money=res.data.amount_sum
					}
				});
			},
			withdrawalAdd(){ 
				var allmoney= Number(this.money)
				var alltotalmoney= Number(this.total_money)
				if(allmoney==null){
					uni.showToast({
					    title:'暂不能提现',
					    icon:'none'
					})
					return
				}
				if(allmoney==0){
					uni.showToast({
					    title:'暂不能提现',
					    icon:'none'
					})
					return
				}
                if(allmoney > alltotalmoney){
                    uni.showToast({
                        title:'暂不能提现',
                        icon:'none'
                    })
                    return
                }
				let that = this
				that.$api.withdrawal_add({
					money:this.money
				}).then(res => {
					console.log('withdrawal_add', res)
					if (res.code == 1) {
                        this.$u.toast(res.msg);    
						setTimeout(()=>{
							uni.$u.route({
								type:'back'
							})
						},800)
					}else{
						 this.$u.toast("提现失败");    
					}
				});
			},
			toggle(type) {
				this.type = type;
				this.$refs['popup'].open();
			},
			change(e) {
				this.active=e
			},
			submit(){
				this.$refs['popup'].close();
			}
		}
	};
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.contain {
		height: 100vh;
		background: #F5F5F5;

	}

	.top {
		display: flex;
		justify-content: space-between;
		height: 242rpx;
		background: #DE2415;
		padding-top: 38rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		position: relative;
	}

	.txjl {
		background-size: 100% 100%;
		width: 178rpx;
		height: 70rpx;
		background-image: url('/static/image/fenxiao40.png');
		text-align: center;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #DE2415;
		line-height: 70rpx;
		margin-top: 30rpx;
	}

	.yuan {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.qian {
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.xia {
		background: #F5F5F5;
		border-radius: 48rpx 48rpx 0px 0px;
		margin-top: -50rpx;
		padding: 30rpx;
		position: relative;
	}

	.xia1 {
		height: 415rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 36rpx 39rpx 39rpx 46rpx;
	}

	.xia2 {
		height: 218rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin-top: 27rpx;
		padding: 36rpx 39rpx 39rpx 46rpx;
	}

	.item_1 {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.item_2 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 33rpx;
	}

	.jiantou {
		background-size: 100% 100%;
		width: 17rpx;
		height: 30rpx;
		background-image: url('/static/image/fenxiao41.png');
		margin-left: 13rpx;
	}

	.btn {
		height: 88rpx;
		background: #DE2415;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item_3 {
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 44rpx;
	}

	.item_4 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.item_5 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.queding {
		height: 88rpx;
		background: #DE2415;
		align-items: center;
		display: flex;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: absolute;
		bottom: 0;
		width: 100%;

		font-weight: 500;
	}

	.poptitle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-left: 14rpx;
		color: #333333;
	}

	.way {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.box {
		position: relative;
	}

	.box .icon-search {
		width: 56rpx;
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		position: absolute;
		top: 13rpx;
		left: 0;
	}

	.box .username {}
</style>
